
import React from 'react';
import classnames from 'classnames';
import css from './index.less';
import Range from 'components/config/range';
import Group from 'components/config/group';
import Bull from 'components/config/bull';
import Whxy from 'components/config/whxy';
import Stroke from 'components/config/stroke';
import InputNum from 'components/config/inputNum';
import FontFamily from './fontFamily';
import Icon from 'components/icon';
import { Collapse } from 'antd';
import { observer, inject } from 'mobx-react';

const align = [
  {type: 'icon-text-align-left', text: 'left'},
  {type: 'icon-text-align-center', text: 'center'},
  {type: 'icon-text-align-right', text: 'right'},
];
const line = [
  {type: 'icon-text-underline', text: 'underline'},
  {type: 'icon-text-line-through', text: 'line-through'}
];
const vertical = [
  {type: 'icon-text-horizontal' },
  {type: 'icon-text-vertical' }
];

@inject('store')
@observer
export default class TextConfig extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      isCheck: 0,
      strongColor: '',
      italicColor: '',
    };
  }

  onRangeChange(label, val) {
    const {store} = this.props;
    switch (label) {
      case 'X' : store.selected.setAttr('left', val); break;
      case 'Y' : store.selected.setAttr('top', val); break;
      case '字号' : store.selected.setAttr('fontSize', val); break;
      case '字距' : store.selected.setAttr('letterSpacing', val); break;
      case '行距' : store.selected.setAttr('lineHeight', val); break;
      case '描边' : store.selected.setAttr('textStrokeWidth', val); break;
      case '旋转' : store.selected.setAttr('rotate', val); break;
      case '透明' : store.selected.setAttr('opacity', val); break;
      case '模糊' : store.selected.setAttr('blur', val); break;

      case '亮度' : store.selected.setAttr('brightness', val); break;
      case '对比' : store.selected.setAttr('contrast', val); break;
      case '饱和' : store.selected.setAttr('saturate', val); break;
      case '灰度' : store.selected.setAttr('grayscale', val); break;
      case '色相' : store.selected.setAttr('hueRotate', val); break;
      case '反色' : store.selected.setAttr('invert', val); break;
    }
  }

  // 字体选择
  optionFamily(num) {
    console.log(num);
  }

  // 单选框描边,不能选虚线和点线，先模拟颜色
  optionStyle(num) {
    const { store } = this.props;
    switch (num) {
      case 0 : store.selected.setAttr('textStrokeColor', 'red'); break;
      case 1 : store.selected.setAttr('textStrokeColor', 'green'); break;
      case 2 : store.selected.setAttr('textStrokeColor', 'yellow'); break;
      case 3 : store.selected.setAttr('textStrokeColor', 'black'); break;
      case 4 : store.selected.setAttr('textStrokeColor', 'white'); break;
    }
  }

  // 蓝色三角符号加减函数
  addNumber(label) {
    const { store } = this.props;
    store.selected.addNumber(label);
  }
  decNumber(label) {
    const { store } = this.props;
    store.selected.decNumber(label);
  }



  renderAlign(item, index) {
    const { textAlign } = this.props.store.selected;
    const props = {
      key: index,
      type: item.type,
      className: textAlign === item.text ? css.isCheck : css.notCheck,
      onClick: () => {this.align(item.text)},
    };
    return <Icon {...props}/>;
  }
  // 对齐
  align(text) {
    const { selected } = this.props.store;
    switch (text) {
      case 'left': selected.setAttr('textAlign', 'left' ); break;
      case 'center': selected.setAttr('textAlign', 'center' ); break;
      case 'right': selected.setAttr('textAlign', 'right' ); break;
    }
  }

  renderLine(item, index) {
    const { textDecoration } = this.props.store.selected;
    const props = {
      type: item.type,
      key: index,
      className: textDecoration === item.text ? css.isCheck : css.notCheck,
      onClick: () => {this.line(item.text)},
    };
    return <Icon {...props}/>;
  }
  // 文字下划线和中划线
  line(text) {
    const {store} = this.props;
    if (text === 'underline') {
      store.selected.textUnderline(text);
    } else {
      store.selected.textUnderline(text);
    }
  }

  // 文字加粗
  textStrong() {
    const {store} = this.props;
    store.selected.textStrong();
    const { fontWeight } = store.selected;
    if (fontWeight === 'bold') {
      this.setState({strongColor: '#3082ff'});
    } else {
      this.setState({strongColor: ''});
    }
  }
  // 文字倾斜
  textItalic() {
    const {store} = this.props;
    store.selected.textItalic();
    const { fontStyle } = store.selected;
    if (fontStyle === 'italic') {
      this.setState({italicColor: '#3082ff'});
    } else {
      this.setState({italicColor: ''});
    }
  }

  renderVertical(item, index) {
    const {isCheck} = this.state;
    const props = {
      type: item.type,
      key: index,
      className: isCheck === index ? css.isCheck : css.notCheck,
      onClick: () => {this.horizontal(index)},
    };
    return <Icon {...props}/>
  }
  // 文字排列方式
  horizontal(ind) {
    const { store } = this.props;
    store.selected.textHorizontal(ind);
    this.setState({
      isCheck: ind,
    });
  }


  componentDidMount() {

  }



  render() {
    const { top, left, borderWidth, brightness, opacity, blur,
      contrast, rotate, grayscale, saturate, hueRotate, invert,
      letterSpacing, fontSize, lineHeight, textStrokeWidth
    } = this.props.store.selected;

    const { strongColor, italicColor } = this.state;

    const collapseProps = {
      bordered: false,
      defaultActiveKey: ['0', '1', '2', '3', '4', '5'],
      className: css.body,
    };
    const rangeProps = {
      onRangeChange: this.onRangeChange.bind(this),

    };
    const numProps = {
      optionStyle: this.optionStyle.bind(this),
      changeNumber: this.onRangeChange.bind(this),
      decNumber: this.decNumber.bind(this),
      addNumber: this.addNumber.bind(this),
      type: 'number',
    };


    const groups = [
      {
        title: '基本设置',
        children: (
          <Bull key="1" title="位置">
            <Whxy label="X" left={60} {...rangeProps} inputValue={left}/>
            <Whxy label="Y" left={120} {...rangeProps} inputValue={top}/>
          </Bull>
        )
      },
      {
        title: '字体字号',
        children: (
          <div>
            <Bull key="0" title="字体">
              <FontFamily optionFamily={this.optionFamily.bind(this)}/>
            </Bull>
            <Bull key="1" title="">
              <InputNum label="字号" numValue={fontSize} {...numProps}/>
              <div className={css.fontColor}><span>字体颜色</span><Icon type="icon-emoji"/></div>
            </Bull>
            <div className={css.hr}/>
            <div className={css.fontIcon}>
              { align.map( (item, index) => this.renderAlign(item, index)) }
              <Icon type="icon-text-strong" style={{color: strongColor}} onClick={this.textStrong.bind(this)}/>
              <Icon type="icon-text-italic" style={{color: italicColor}} onClick={this.textItalic.bind(this)}/>
              { line.map( (item, index) => this.renderLine(item, index)) }
            </div>
            <div className={css.fontIcon}>
              { vertical.map( (item, index) => this.renderVertical(item, index))}
            </div>
          </div>
        )
      },
      {
        title: '字符间距',
        children: (
          <Bull key="0" title="">
            <div className={css.zifu}>
              <InputNum label="字距" numValue={letterSpacing} {...numProps}/>
              <InputNum label="行距" numValue={lineHeight} {...numProps}/>
            </div>
          </Bull>

        )
      },
      {
        title: '元素层级顺序',
        children: (
          <div>
            哈哈哈
          </div>
        )
      },
      {
        title: '样式设置',
        children: (
          <div>
            <Bull key="0" title="填充">
              <Icon type="icon-emoji" className={css.fillIcon}/>
            </Bull>
            <Bull key="1" title="描边">
              <Icon type="icon-emoji" className={css.fillIcon}/>
              <Stroke label="描边" numValue={textStrokeWidth} {...numProps}/>
            </Bull>
            <Bull key="2" title="">
              <Range label="透明" {...rangeProps} min={0} max={1} step={0.01} inputValue={opacity}/>
            </Bull>
            <Bull key="3">
              <Range label="模糊" {...rangeProps} min={0} max={10} step={0.01} inputValue={blur}/>
            </Bull>
            <div />
            <Bull key="4">
              <Range label="旋转" {...rangeProps} min={-180} max={180} step={1} inputValue={rotate}/>
            </Bull>
          </div>
        )
      },
      {
        title: '滤镜设置',
        children: (
          <div>
            <Bull title="" key="0">
              <Range label="亮度" {...rangeProps} min={0} max={200} step={1} inputValue={brightness}/>
            </Bull>
            <Bull title="" key="1">
              <Range label="对比" {...rangeProps} min={0} max={200} step={1} inputValue={contrast}/>
            </Bull>
            <Bull title="" key="2">
              <Range label="饱和" {...rangeProps} min={0} max={100} step={1} inputValue={saturate}/>
            </Bull>
            <Bull title="" key="3">
              <Range label="灰度" {...rangeProps} min={0} max={100} step={1} inputValue={grayscale}/>
            </Bull>
            <Bull title="" key="4">
              <Range label="加温" {...rangeProps} min={0} max={100} step={1} inputValue={rotate}/>
            </Bull>
            <Bull title="" key="5">
              <Range label="色相" {...rangeProps} min={0} max={360} step={1} inputValue={hueRotate}/>
            </Bull>
            <Bull title="" key="6">
              <Range label="反色" {...rangeProps} min={0} max={100} step={1} inputValue={invert}/>
            </Bull>
          </div>
        )
      },

    ];


    return (

      <Collapse {...collapseProps}>
        {groups.map((group, key) => {
          const _props = {
            ...group,
            key,
          };
          return <Group {..._props}/>;
        })}
      </Collapse>


    );
  }
}
